<%--
  Created by IntelliJ IDEA.
  User: maliangcheng
  Date: 2020/8/15
  Time: 18:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="v-on" uri="http://www.springframework.org/tags/form" %>
<%@include file="head.jsp"%>
<html>
<head>
    <title>order</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/resource/layui/css/layui.css" media="all">
</head>
<body>
<div style=" background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-body" style="height: 200px;margin-top: 20px">
                    <div>
                        <i class="layui-icon layui-icon-search" style="font-size:30px;margin-left: 30px;margin-inside: 20px"></i>
                        <span>筛选搜索</span>

                    </div>
                    <div style="margin-top: 15px" id="vue">
                        <form class="layui-form" action="${pageContext.request.contextPath}/order/queryOrder" method="post">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">输入搜索</label>
                                    <div class="layui-input-inline">
                                        <input v-model="listQuery.orderId" placeholder="请输入订单编号" type="text" name="orderId" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">提交时间</label>
                                    <div class="layui-input-inline">
                                        <input v-model="listQuery.orderDate" placeholder="请输入提交时间" type="text" name="orderDate" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">客户编号</label>
                                    <div class="layui-input-inline">
                                        <input v-model="listQuery.customerId" placeholder="请输入客户编号" type="text" name="customerId" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label" style="width: 100px">订单来源</label>
                                    <div class="layui-input-inline">
                                        <input v-model="listQuery.payWay" placeholder="支付方式" type="text" name="payWay" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <span style="color: #FD482C">${msg}</span>
                                <a class="layui-btn" href="${pageContext.request.contextPath}/order/getOrder" style="float: right;margin-right: 30px;margin-top: 20px">查询全部</a>
                                <button type="submit" class="layui-btn" style="float: right;margin-right: 30px;margin-top: 20px" v-on:click="handleSearchList">搜索</button>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style=" background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-icon-align,layui-card-header" style="height: 50px;margin-top: 20px">
                    <i class="layui-icon layui-icon-form" style="font-size:30px;margin-left: 30px;margin-inside: 20px"></i>
                    数据列表</div>
            </div>
        </div>
    </div>
</div>
<table class="layui-table" lay-data="{align:'center',height:330, url:'', page:true, id:'idTest'}" >
    <thead>
    <tr>
        <th lay-data="{field:'orderId', width:150, sort: true, fixed: true}">订单编号</th>
        <th lay-data="{field:'orderDate', width:150}">提交时间</th>
        <th lay-data="{field:'customerId', width:150, sort: true}">用户编号</th>
        <th lay-data="{field:'employeesId', width:150}">员工编号</th>
        <th lay-data="{field:'payWay', width:160}">支付方式</th>
        <th lay-data="{field:'invoiceNum', width:150, sort: true}">发票号</th>
        <th lay-data="{field:'tool', fixed: 'right', align:'center',sort: true}">操作</th>
    </tr>
    </thead>
    <tbody>
    <c:forEach var="order" items="${list}">
        <tr>
            <td>${order.orderId}</td>
            <td>${order.orderDate}</td>
            <td>${order.customerId}</td>
            <td>${order.employeesId}</td>
            <td>${order.payWay}</td>
            <td>${order.invoiceNum}</td>
            <td>
                <a class="layui-btn layui-btn-xs"href="${pageContext.request.contextPath}/order/toOrderTail?id=${order.getOrderId()}">查看</a>
            </td>
        </tr>

    </c:forEach>
    </tbody>
</table>
<script src="/resource/layui/layui.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="../js/order.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

<script>
    import {fetchList} from '../api/order';
    var vm = new Vue({
       el: "#vue",
       data: {
           defaultListQuery : {
               orderId: null,
               orderDate: null,
               customerId: null,
               payWay: null
           }
       },
        data() {
            return {
                listQuery: Object.assign({}, defaultListQuery),
                listLoading: true,
                list: null,
                total: null
            }

        },
        methods: {
            handleSearchList: function() {
                alert("ok");
                this.getList();
            },
            getList: function() {
                this.listLoading = true;
                // fetchList(this.listQuery).then(response => {
                //     this.listLoading = false;
                //     this.list = response.data.list;
                //     this.total = response.data.total;
                // });
                axios.post('http://localhost:8080/order/list',{
                    params: this.listQuery
                }).then(response=>{
                    this.list = response.data
                });
            }
        }
    });
    // const defaultListQuery = {
    //
    //     orderId: null,
    //     orderDate: null,
    //     customerId: null,
    //     payWay: null
    // };
    // export default {
    //     name: "orderList",
    //     data() {
    //         return {
    //             listQuery: Object.assign({}, defaultListQuery),
    //             listLoading: true,
    //             list: null,
    //             total: null
    //         }
    //     },
    //     created() {
    //         this.getList();
    //     },
    //     methods: {
    //         handleSearchList() {
    //             alert("ok")
    //             this.getList();
    //         },
    //         getList() {
    //             this.listLoading = true;
    //             // fetchList(this.listQuery).then(response => {
    //             //     this.listLoading = false;
    //             //     this.list = response.data.list;
    //             //     this.total = response.data.total;
    //             // });
    //             axios.post('http://localhost:8080/order/list',{
    //                 params: this.listQuery
    //             }).then(response=>{
    //                 this.list = response.data
    //                 });
    //         }
    //     }
    //
    // }
</script>
</body>
</html>
